<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-26px pr-26px pb-16px">
            <Search :platforms="state.platforms" @search="handleSearch" />
            <el-table :data="state.tableData" v-loading="state.isLoading" style="width: 100%">
                <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="80">
                </el-table-column>                
                <el-table-column width="200" prop="Keyword" align="center" label="关键词" />
                <el-table-column prop="AritcleTitle" align="center" label="标题" />
                <el-table-column width="200" prop="Platform" align="center" label="发布平台" />
                <el-table-column width="200" prop="Url" align="center" label="发布Url">
                    <template v-slot="scope">
                        <a :href="scope.row.Url" target="_blank" class="text-underline text-blue-600"
                            v-if="scope.row.Url">查看</a>
                        <a v-else class="text-underline">-</a>
                    </template>
                </el-table-column>
                <el-table-column width="150" prop="StateName" align="center" label="发布状态">
                    <template v-slot="scope">
                        <el-tag type="primary" v-if="scope.row.StateName === '发布成功'" >{{ scope.row.StateName }}</el-tag>
                        <el-tag type="danger" v-else>{{ scope.row.StateName }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex flex-center pb-16px page-container">
            <Pagination v-if="state.tableData.length > 0" v-model:total="state.page.total"
                v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" :autoScroll="false"
                @pagination="handlePage" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getTechArticleApi } from '@/api/geo'
import { IPlatform } from '@/api/geo/types'
import Search from './components/Search.vue'

const route = useRoute()

const state = reactive({
    tableData: [],
    platforms: <IPlatform[]>[],
    platform:'',
    keyword: '',
    title: '',
    page: {
        total: 0,
        curPage: 1,
        limit: 20,
        pageSizes: 20,
    },
    isLoading: true,
    isPlatform: false,
    platformID: 0
})

onMounted(() => {
    getArticleStatistics()
})

async function getArticleStatistics() {
    const res: ResType = await getTechArticleApi({
        id: Number(route.params.id) || 0,
        keyword: state.keyword,
        title: state.title,
        plat: state.platform,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes
    })
    if (res.code === 200) {
        state.isLoading = false
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
        state.platforms = res.platformlist
    }
}

function handlePage(value: any) {
    state.page.limit = value.limit
    getArticleStatistics()
}

function indexMethod(index: number) {
    return (state.page.curPage - 1) * state.page.limit + index + 1
}

function handleSearch(value: any) {
    state.keyword = value.keyword
    state.title = value.title
    state.platform = value.platform
    state.page.curPage = 1
    getArticleStatistics()
}
</script>

<style scoped></style>